<!DOCTYPE html> 
<html>
  <head>
    <!--META-->
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <!--CSS-->
    <link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
    <link rel="stylesheet" href="API/js/DataTables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" href="API/css/mycss.css" />
    <link rel="stylesheet" href="css/mycss.css" />

    <!--JS-->
    <script type="text/javascript" src="include/config.js"></script>
    <script type="text/javascript" src="API/js/Jquery/jquery.min.js"></script>
    <script type="text/javascript" src="API/js/JqueryMobile/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="API/js/Highcharts/highcharts.js"></script>
    <script type="text/javascript" src="API/js/Highcharts/modules/exporting.js"></script>
    <script type="text/javascript" src="API/js/DataTables/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="API/js/functionsLib.js"></script>
    <script type="text/javascript" src="js/fonctions.js"></script>
    <script type="text/javascript" src="http://wowjs.zamimg.com/widgets/power.js?1389797934"></script>

    <script language="javascript" type="text/javascript">
    ///////////////////
    //BLOCK VARIABLE GLOBAL
    ///////////////////
    var id_page = 26;

    ///////////////////
    //BLOCK FONCTIONS EVENEMENTS
    ///////////////////

    //Fin chargement page
    function OnLoad() {
        try {
            buildNavBarSets();
            chargerMetricsCollection();
            chargerMetricsCollectionNeutre();
            chargerMetricsPaquets();
            chargerMetricsDropRate();
            chargerDrop('classique');
            chargerDrop('rare');
            chargerDrop('epique');
            chargerDrop('legendaire');
            chargerBestPaquets();
        } catch (er) {
            $.functionsLib.log(0, "ERROR(OnLoad):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS METIER
    ///////////////////
    function changerSet(idSet) {
        try {
            $.functionsStorage.set('ODA-HOW_currentSet', idSet);
            buildNavBarSets();
            chargerMetricsCollection();
            chargerMetricsCollectionNeutre();
            chargerMetricsPaquets();
            chargerMetricsDropRate();
            chargerDrop('classique');
            chargerDrop('rare');
            chargerDrop('epique');
            chargerDrop('legendaire');
            chargerBestPaquets();
        } catch (er) {
            $.functionsLib.log(0, "ERROR(changerSet):" + er.message);
        }
    }
    
    /**
     * chargerMetricsCollection
     */
    function chargerMetricsCollection(){
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_metrics_collection').html(strhtml);
            var tabSetting = { functionRetour : retourMetricsCollection};
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, set : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')] };
            $.functionsLib.callRest(domaine+"phpsql/getMetricsCollection.php", tabSetting, tabInput);            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerMetricsCollection):" + er.message);
        }
    }
    
    /**
     * chargerMetricsCollectionNeutre
     */
    function chargerMetricsCollectionNeutre(){
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_metrics_collection_neutre').html(strhtml);
            var tabSetting = { functionRetour : retourMetricsCollectionNeutre};
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, set : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')] };
            $.functionsLib.callRest(domaine+"phpsql/getMetricsCollectionNeutre.php", tabSetting, tabInput);            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerMetricsCollectionNeutre):" + er.message);
        }
    }
    
    /**
     * chargerMetricsPaquets
     */
    function chargerMetricsPaquets(){
        try {
            var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
            $('#div_metrics_paquets').html(strhtml);
            var tabSetting = { functionRetour : retourMetricsPaquets};
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, set : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')] };
            $.functionsLib.callRest(domaine+"phpsql/getQualitePaquets.php", tabSetting, tabInput);            
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerMetricsPaquets):" + er.message);
        }
    }     
    
    /**
     * chargerMetricsDropRate
     */
    function chargerMetricsDropRate(){
        try {
            var strhtml = "";
            
            //COMMUN
            var tabInput = { set : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')] };   
            var json_retour_qualitePaquets = $.functionsLib.callRest(domaine+"phpsql/getQualitePaquets.php", {}, tabInput);
            
            if((json_retour_qualitePaquets["strErreur"] == "")&&(json_retour_qualitePaquets["strErreur"] == "")){
                var nbPaquets = parseInt(json_retour_qualitePaquets["data"]["nbpaquets"]["nb"]);
                var repartitionQualite = json_retour_qualitePaquets["data"]["repartitionQualite"]["data"];
                
                var dropRate_comm = 0;
                var dropRate_rare = 0;
                var dropRate_epic = 0;
                var dropRate_legend = 0;
                var dropRate_gold = 0;
                
                var total = 0;
                for (var indice in repartitionQualite){
                    total += parseInt(repartitionQualite[indice]["nb"]);
                }
                
                for (var indice in repartitionQualite){
                    switch (repartitionQualite[indice]["qualite"]){ 
                        case "Commune": 
                            dropRate_comm = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break; 
                        case "Rare": 
                            dropRate_rare = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Épique": 
                            dropRate_epic = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Légendaire": 
                            dropRate_legend = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                    }
                }  
                
                dropRate_gold = $.functionsLib.arrondir(parseInt(json_retour_qualitePaquets["data"]["repartitionGold"]["nb"]) / total * 100,2);
                
            }else{
                $.functionsLib.notification("Erreur : "+json_retour_dropRate["strErreur"]+", "+json_retour_qualitePaquets["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
            
            strhtml += 'Chance au tirage g&eacute;n&eacute;ral : ';
            strhtml += '<ul>';
            strhtml += '<li>Chance au tirage des communes : '+dropRate_comm+'%</li>';
            strhtml += '<li>Chance au tirage des rares : '+dropRate_rare+'%</li>';
            strhtml += '<li>Chance au tirage des &eacute;piques : '+dropRate_epic+'%</li>';
            strhtml += '<li>Chance au tirage des l&eacute;gendraires : '+dropRate_legend+'%</li>';
            strhtml += '<li>Chance au tirage des dor&eacute;es : '+dropRate_gold+'%</li>';
            strhtml += '<li>Sur '+nbPaquets+' paquets.</li>';
            strhtml += '</ul>';
            
            //PERSO
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, set : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')] };
            var json_retour_dropRate = $.functionsLib.callRest(domaine+"phpsql/getMetricsDropRate.php", {}, tabInput); 
            
            var json_retour_qualitePaquets = $.functionsLib.callRest(domaine+"phpsql/getQualitePaquets.php", {}, tabInput);
            
            if((json_retour_dropRate["strErreur"] == "")&&(json_retour_qualitePaquets["strErreur"] == "")){
                var nbPaquets = parseInt(json_retour_qualitePaquets["data"]["nbpaquets"]["nb"]);
                var repartitionQualite = json_retour_qualitePaquets["data"]["repartitionQualite"]["data"];
                var metricsDez = json_retour_dropRate["data"]["resultatDez"]["data"];
                var metricsAvancement = json_retour_dropRate["data"]["resultatAvan"]["data"];
                
                var dropRateCommune = 0;
                var dropRateRare = 0;
                var dropRateEpique = 0;
                var dropRateLegendaire = 0;
                
                var total = 0;
                for (var indice in repartitionQualite){
                    total += parseInt(repartitionQualite[indice]["nb"]);
                } 
                
                for (var indice in repartitionQualite){
                    switch (repartitionQualite[indice]["qualite"]){ 
                        case "Commune": 
                            dropRateCommune = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break; 
                        case "Rare": 
                            dropRateRare = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Épique": 
                            dropRateEpique = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                        case "Légendaire": 
                            dropRateLegendaire = $.functionsLib.arrondir(parseInt(repartitionQualite[indice]["nb"]) / total * 100,2);
                        break;
                    }
                } 
                
                var percDezCommune = 0;
                var percDezRare = 0;
                var percDezEpique = 0;
                var percDezLegendaire = 0;
                var percDezGold = 0;
                for (var indice in metricsDez){
                    switch (metricsDez[indice]["qualite"]){ 
                        case "Commune": 
                            percDezCommune = parseFloat(metricsDez[indice]["percDez"]);
                        break; 
                        case "Rare": 
                            percDezRare = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                        case "Épique": 
                            percDezEpique = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                        case "Légendaire": 
                            percDezLegendaire = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                        case "gold": 
                            percDezGold = parseFloat(metricsDez[indice]["percDez"]);
                        break;
                    }
                } 
                
                var strAvCommune = 0;
                var strAvRare = 0;
                var strAvEpique = 0;
                var strAvLegendaire = 0;
                for (var indice in metricsAvancement){
                    switch (metricsAvancement[indice]["qualite"]){ 
                        case "Commune": 
                            var restCommune = parseInt(metricsAvancement[indice]["rest"]);
                            strAvCommune = 'reste : '+restCommune+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+(parseInt(metricsAvancement[indice]["nbInv"])*2)+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break; 
                        case "Rare": 
                            var restRare = parseInt(metricsAvancement[indice]["rest"]);
                            strAvRare = 'reste : '+restRare+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+(parseInt(metricsAvancement[indice]["nbInv"])*2)+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break;
                        case "Épique": 
                            var restEpique = parseInt(metricsAvancement[indice]["rest"]);
                            strAvEpique = 'reste : '+restEpique+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+(parseInt(metricsAvancement[indice]["nbInv"])*2)+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break;
                        case "Légendaire": 
                            var restLegendaire = parseInt(metricsAvancement[indice]["rest"]);
                            strAvLegendaire = 'reste : '+restLegendaire+' pour : '+parseInt(metricsAvancement[indice]["nbMy"])+'/'+parseInt(metricsAvancement[indice]["nbInv"])+', soit : '+parseFloat(metricsAvancement[indice]["avancement"])+'%';
                        break;
                    }
                } 
                
                var burnDownCommune = $.functionsLib.arrondir((restCommune*100)/(dropRateCommune*percDezCommune/100)/5,0);
                var burnDownRare = $.functionsLib.arrondir((restRare*100)/(dropRateRare*percDezRare/100)/5,0);
                var burnDownEpique = $.functionsLib.arrondir((restEpique*100)/(dropRateEpique*dropRateEpique/100)/5,0);
                var burnDownLegendaire = $.functionsLib.arrondir((restLegendaire*100)/(dropRateLegendaire*dropRateLegendaire/100)/5,0);
                
                strhtml += 'Vos statistiques de tirage : ';
                strhtml += '<ul>';
                
                if(dropRateCommune >= dropRate_comm){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des communes : '+dropRateCommune+'% ('+percDezCommune+'% Dez)</li>';
                
                if(dropRateRare >= dropRate_rare){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des rares : '+dropRateRare+'% ('+percDezRare+'% Dez)</li>';
                
                if(dropRateEpique >= dropRate_epic){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des &eacute;piques : '+dropRateEpique+'% ('+percDezEpique+'% Dez)</li>';
                
                if(dropRateLegendaire >= dropRate_legend){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des l&eacute;gendaires : '+dropRateLegendaire+'% ('+percDezLegendaire+'% Dez)</li>';
                
                var myDropRateGold = $.functionsLib.arrondir(parseFloat(json_retour_dropRate["data"]["resultat"]["dropRate_gold"]),2);
                if(myDropRateGold >= dropRate_gold){
                    var color =  $.functionsLib.oda_msg_color.SUCCES;
                }else{
                    var color =  $.functionsLib.oda_msg_color.WARNING;
                }
                strhtml += '<li style="color:'+color+';">Taux de tirage des dor&eacute;es : '+myDropRateGold+'% ('+percDezGold+'% Dez)</li>';
                
                strhtml += '<li>Sur '+nbPaquets+' paquets.</li>';
                strhtml += '</ul>';
                
                strhtml += 'Votre avancement : ';
                strhtml += '<ul>';
                strhtml += '<li>Pour les communes => '+strAvCommune+'</li>';
                strhtml += '<li>Pour les rares => '+strAvRare+'</li>';
                strhtml += '<li>Pour les &eacute;piques => '+strAvEpique+'</li>';
                strhtml += '<li>Pour les l&eacute;gendaires => '+strAvLegendaire+'</li>';
                strhtml += '</ul>';
                
                strhtml += 'Votre burn down pour finir collection : ';
                strhtml += '<ul>';
                strhtml += '<li>Pour les communes => '+burnDownCommune+' paquets &agrave; ouvrir</li>';
                strhtml += '<li>Pour les rares => '+burnDownRare+' paquets &agrave; ouvrir</li>';
                strhtml += '<li>Pour les &eacute;piques => '+burnDownEpique+' paquets &agrave; ouvrir</li>';
                strhtml += '<li>Pour les l&eacute;gendaires => '+burnDownLegendaire+' paquets &agrave; ouvrir</li>';
                strhtml += '</ul>';
                
                $('#div_metrics_dropRate').html(strhtml);
            } else{
                $.functionsLib.notification("Erreur : "+json_retour_dropRate["strErreur"]+", "+json_retour_qualitePaquets["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerMetricsDropRate):" + er.message);
        }
    }

    /**
     * @name chargerBestPaquets
     */
    function chargerBestPaquets(){
        try {
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, set : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')] };
            var retour = $.functionsLib.callRest(domaine+"phpsql/bestPaquetes.php", {}, tabInput);
            var datas = retour["data"]["resultat"]["data"];
            
            var strHtml = '';
            var ite = 0;
            for (var indice in datas) {
                if(ite == 0){
                    strHtml += $.functionsLib.getStrDate.getStrDateTimeFrFromUs(datas[indice]["date_ajout"])+ ' : ';
                }
                ite ++;
                strHtml += '<a href="http://www.wowhead.com/hearthstone/card='+datas[indice]["id_link"]+'" style="color: '+colorCard[datas[indice]["qualite"]]+';text-decoration: none">'+datas[indice]["nom"]+'</a>';
                if(datas[indice]["gold"] == "1"){
                  strHtml += '(Dor&eacute;)';  
                }
                if(ite == 5){
                    strHtml += '<br>';
                    ite = 0;
                }else{
                    strHtml += ', ';
                }
            }
            $('#div_best_paquets').html(strHtml);
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerBestPaquets):" + er.message);
        }
    }
    
        /**
     * @name chargerDrop
     * @param {string} p_retour
     */
    function chargerDrop(p_qualite){
        try {
            var dbQualite = '';
            switch(p_qualite) {
                case 'classique':
                    dbQualite = 'Commune';
                    break;
                case 'rare':
                    dbQualite = 'Rare';
                    break;
                case 'epique':
                    dbQualite = 'Épique';
                    break;
                case 'legendaire':
                    dbQualite = 'Légendaire';
                    break;
                default:
                    dbQualite = 'Commune';
            }
            
            var tabInput = { code_user : $.functionsLib.getUserInfo().code_user, qualite : dbQualite, set : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')] };
            var retour = $.functionsLib.callRest(domaine+"phpsql/getClassementDrop.php", {}, tabInput);
            var datas = retour["data"]["resultat"]["data"];
            
            var strHtml = '';
            for (var indice in datas) {
                strHtml += datas[indice]["nb"]+' - <a href="http://www.wowhead.com/hearthstone/card='+datas[indice]["id_link"]+'" style="color: '+colorCard[datas[indice]["qualite"]]+';text-decoration: none">'+datas[indice]["nom"]+'</a><br>';
            }
            $('#div_drop_'+p_qualite).html(strHtml);
        } catch (er) {
            $.functionsLib.log(0, "ERROR(chargerDrop):" + er.message);
        }
    }

    ///////////////////
    //BLOCK FONCTIONS AFFICHAGE
    ///////////////////
    /**
     * retourMetricsCollection
     * 
     * @param {array} p_retour
     */
    function retourMetricsCollection(json_retour){
        try {
            if(json_retour["strErreur"] == ""){
                
                //Classes
                var categories = new Array();
                categories = $.functionsLib.getListValeurPourAttribut(json_retour["data"]["classes"]["data"],"classe");
                
                //Pour chaque qualités, le nombre présent dans chaque classe qualite_classe
                //Pour chaque tranche, le nombre pour chaque categorie, même à 0
                var series = new Array();
                var seriesData = json_retour["data"]["qualite_classe"]["data"];
                
                var oldSubserie = null;
                var subDatas = { name : null};
                subDatas.data = new Array();
                for (var indice in seriesData) {
                    if(oldSubserie != seriesData[indice]["qualite"]){
                        if(subDatas.data.length != 0){
                            series[series.length] = subDatas;
                        }
                        subDatas = { 
                            name : seriesData[indice]["qualite"] 
                            , color : colorCard[seriesData[indice]["qualite"]]
                            , stack: 'myCollection'
                        };
                        subDatas.data = new Array();
                        oldSubserie = seriesData[indice]["qualite"];
                    }
                    subDatas.data[subDatas.data.length] = parseInt(seriesData[indice]["nb"]);
                }
                series[series.length] = subDatas;
                
                var seriesData = json_retour["data"]["qualite_classe_inventaire"]["data"];
                
                var oldSubserie = null;
                var subDatas = { name : null};
                subDatas.data = new Array();
                for (var indice in seriesData) {
                    if(oldSubserie != seriesData[indice]["qualite"]){
                        if(subDatas.data.length != 0){
                            series[series.length] = subDatas;
                        }
                        subDatas = { 
                            name : seriesData[indice]["qualite"] 
                            , color : colorCard[seriesData[indice]["qualite"]+'_inv']
                            , stack: 'inventaire'
                        };
                        subDatas.data = new Array();
                        oldSubserie = seriesData[indice]["qualite"];
                    }
                    subDatas.data[subDatas.data.length] = parseInt(seriesData[indice]["nb"]);
                }
                series[series.length] = subDatas;

                var retour = $('#div_metrics_collection').highcharts({
                    chart: {
                        backgroundColor:'rgba(255, 255, 255, 0.1)'
                        , type : "column"
                    },
                    title: {
                        text: 'Répartition des cartes en qualité'
                    },
                    xAxis: {
                        categories: categories
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Total par classe'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                            }
                        }
                    },
                    legend: {
                        align: 'right',
                        x: -70,
                        verticalAlign: 'top',
                        y: 20,
                        floating: true,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        useHTML: true,
                        formatter: function() {
                            var s;
                            s = this.key+','+this.series.name +' : '+this.y+', '+$.functionsLib.arrondir((this.y / this.point.stackTotal * 100),2)+'% (<a href="#" onclick="openMissedCards({\'classe\':\''+this.key+'\',\'qualite\':\''+this.series.name+'\'});">Manquante(s)</a>)';
                            return s;
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: 'white',
                                formatter: function() {
                                    var s;
                                    if(this.y != 0){
                                        s = this.y;
                                    }
                                    return s;
                                }
                            }
                        }
                    },
                    series: series
                });
            } else{
                $('#div_metrics_collection').html(json_retour["strErreur"]);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourMetricsCollection):" + er.message);
        }
    }
    
    /**
     * retourMetricsCollectionNeutre
     * 
     * @param {json} p_retour
     */
    function retourMetricsCollectionNeutre(p_retour){
        try {
            if(p_retour["strErreur"] == ""){
                
                var nbCommColl = (p_retour["data"]["qualite_neutre"]["data"][0] != undefined) ? parseInt(p_retour["data"]["qualite_neutre"]["data"][0]["nb"]) : 0;
                var nbCommInv = (p_retour["data"]["qualite_neutre_inventaire"]["data"][0] != undefined) ? parseInt(p_retour["data"]["qualite_neutre_inventaire"]["data"][0]["nb"]) : 0;
                
                var nbRareColl = (p_retour["data"]["qualite_neutre"]["data"][3] != undefined) ? parseInt(p_retour["data"]["qualite_neutre"]["data"][3]["nb"]) : 0;
                var nbRareInv = (p_retour["data"]["qualite_neutre_inventaire"]["data"][3] != undefined) ? parseInt(p_retour["data"]["qualite_neutre_inventaire"]["data"][3]["nb"]) : 0;
                
                var nbEpiqueColl = (p_retour["data"]["qualite_neutre"]["data"][1] != undefined) ? parseInt(p_retour["data"]["qualite_neutre"]["data"][1]["nb"]) : 0;
                var nbEpiqueInv = (p_retour["data"]["qualite_neutre_inventaire"]["data"][1] != undefined) ? parseInt(p_retour["data"]["qualite_neutre_inventaire"]["data"][1]["nb"]) : 0;
                
                var nbLegColl = (p_retour["data"]["qualite_neutre"]["data"][2] != undefined) ? parseInt(p_retour["data"]["qualite_neutre"]["data"][2]["nb"]) : 0;
                var nbLegInv = (p_retour["data"]["qualite_neutre_inventaire"]["data"][2] != undefined) ? parseInt(p_retour["data"]["qualite_neutre_inventaire"]["data"][2]["nb"]) : 0;
                
                var vSeries = [{
                        name: 'Commune',
                        color:colorCard.Commune,
                        data: [nbCommColl, nbCommInv]
                    },{
                        name: 'Rare',
                        color:colorCard.Rare,
                        data: [nbRareColl, nbRareInv]
                    },{
                        name: 'Épique',
                        color:colorCard.Épique,
                        data: [nbEpiqueColl, nbEpiqueInv]
                    },{
                        name: 'Légendaire',
                        color:colorCard.Légendaire,
                        data: [nbLegColl, nbLegInv]
                    }]
                ;
                
                var retour = $('#div_metrics_collection_neutre').highcharts({
                    chart: {
                        backgroundColor:'rgba(255, 255, 255, 0.1)'
                        , type : "column"
                    },
                    title: {
                        text: 'Répartition des cartes neutre en qualité'
                    },
                    xAxis: {
                        categories: ['Neutre', 'Neutre']
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Par qualitée'
                        },
                        stackLabels: {
                            enabled: true,
                            style: {
                                fontWeight: 'bold',
                                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                            }
                        }
                    },
                    legend: {
                        align: 'right',
                        x: -70,
                        verticalAlign: 'top',
                        y: 20,
                        floating: true,
                        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                        borderColor: '#CCC',
                        borderWidth: 1,
                        shadow: false
                    },
                    tooltip: {
                        useHTML: true,
                        formatter: function() {
                            var s = this.key+','+this.series.name +' : '+this.y+', '+$.functionsLib.arrondir((this.y / this.point.stackTotal * 100),2)+'% (<a href="#" onclick="openMissedCards({\'classe\':\''+this.key+'\',\'qualite\':\''+this.series.name+'\'});">Manquante(s)</a>)';
                            return s;
                        }
                    },
                    plotOptions: {
                        column: {
                            stacking: 'normal',
                            dataLabels: {
                                enabled: true,
                                color: 'white',
                                formatter: function() {
                                    var s;
                                    if(this.y != 0){
                                        s = this.y;
                                    }
                                    return s;
                                }
                            }
                        }
                    },
                    series : vSeries
                });
            }
            else{
                $('#div_metrics_collection_neutre').html(p_retour["strErreur"]);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourMetricsCollectionNeutre):" + er.message);
        }
    }
    
    /**
     * retourMetricsPaquets
     * 
     * @param {array} p_retour
     */
    function retourMetricsPaquets(json_retour){
        try {
            if(json_retour["strErreur"] == ""){
                
                var pieDbDatas = json_retour["data"]["repartitionQualite"]["data"];
                var pieDatas = new Array();
                for (var indice in pieDbDatas) {
                    pieDatas[pieDatas.length] = {
                        name : pieDbDatas[indice]["qualite"],
                        color : colorCard[pieDbDatas[indice]["qualite"]],
                        y : parseInt(pieDbDatas[indice]["nb"])
                    };
                }

                // Create the chart
                $('#div_metrics_paquets').highcharts({
                    chart: {
                        type: 'pie',
                        backgroundColor:'rgba(255, 255, 255, 0.1)'
                    },
                    title: {
                        text: 'Taux de drop par qualité'
                    },
                    plotOptions: {
                        pie: {
                            shadow: true,
                            center: ['50%', '50%']
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            var s;
                            s = this.point.name +' : '+$.functionsLib.arrondir(this.point.percentage,2)+"% ("+this.y+")";
                            return s;
                        }
                    },
                    series: [{
                        name: 'Qualité',
                        data: pieDatas,
                        dataLabels: {
                            formatter: function() {
                                var s;
                                if (this.point.percentage > 2) { // the pie chart
                                    s = this.point.name +':'+$.functionsLib.arrondir(this.point.percentage,2)+"%";
                                }
                                return s;
                            }
                        }
                    }]
                });
                
            } else{
                $('#div_metrics_paquets').html(json_retour["strErreur"]);
            }
            $('#nbPaquets').remove();
            $('#div_metrics_paquets').after('<label style="font-size:70%;color:#BDBDBD;" id="nbPaquets">From:'+json_retour["data"]["nbpaquets"]["nb"]+'</label>');
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourMetricsPaquets):" + er.message);
        }
    }
    
    /**
     * Build NavBar Sets
     */
    function buildNavBarSets(){
        try {
            var strHtml = '<div data-role="navbar"><ul>';
            for (var indice in tab_sets) {
                if($.functionsStorage.get('ODA-HOW_currentSet',0) == indice){
                    strHtml += '<li><a href="#" class="ui-btn-active ui-state-disabled">'+tab_sets[indice]+'</a></li>';
                }else{
                    strHtml += '<li><a href="#" onclick="changerSet('+indice+')">'+tab_sets[indice]+'</a></li>';
                }
            }
            strHtml += '</ul></div>';
            $('#navBarSets').html(strHtml).trigger('create');
        } catch (er) {
            $.functionsLib.log(0, "ERROR(buildNavBarSets):" + er.message);
        }
    }
    
    
    /**
     * Open missed card
     */
    function openMissedCards(p_params){
        try {
            setTimeout(function(){
                var strhtml = "<IMG SRC=\"API/img/loading.gif\" ALT=\"Chargement\" TITLE=\"Chargement\">";
                $('#div_popup').css('width', 500);
                $('#div_popup').css('height', 400);
                $.functionsLib.affichePopUp('Cartes manquantes',strhtml);

                var myReturn = true;

                var tabSetting = { functionRetour : retourMissedCards};
                var tabInput = { "code_user" : $.functionsLib.getUserInfo().code_user, "set" : tab_sets[$.functionsStorage.get('ODA-HOW_currentSet')], "classe" : p_params.classe, "qualite" : p_params.qualite };
                $.functionsLib.callRest(domaine+"phpsql/getMissedCards.php", tabSetting, tabInput); 

                return myReturn;
            }, 100);
        } catch (er) {
            $.functionsLib.log(0, "ERROR(openMissedCards):" + er.message);
        }
    }
    
    /**
     * retourMissedCards
     * 
     * @param {array} p_retour
     */
    function retourMissedCards(json_retour){
        try {
            if(json_retour["strErreur"] == ""){
                var objDataTable = $.functionsLib.objDataTableFromJsonArray(json_retour["data"]["resultat"]["data"]);
                var strhtml = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_missedCards">';
                $('#div_popup').html(strhtml);
                
                var oTable = $('#table_missedCards').dataTable( {
                    "oLanguage": {
                        "sUrl": "API/js/DataTables/i8n/lang_FR.json"
                    },
                    "bLengthChange": false,
                    "iDisplayLength": 5,
                    "aaData": objDataTable.data,
                    "aaSorting": [[0,'asc']],
                    "aoColumns": [
                        { "sTitle": "Carte", "width": "10em" },
                        { "sTitle": "Coût", "sClass": "dataTableColCenter", "width": "2em" },
                        { "sTitle": "Type", "width": "3em" }
                    ],
                    "aoColumnDefs": [
                        {
                            mRender: function ( data, type, row ) {
                                var strHtml = '<a href="http://www.wowhead.com/hearthstone/card='+row[objDataTable.entete["id_link"]]+'" style="color: '+colorCard[row[objDataTable.entete["qualite"]]]+';text-decoration: none">'+row[objDataTable.entete["nom"]]+'</a>';
                                return strHtml;
                            },
                            aTargets: [ 0 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["cout"]];
                            },
                            "aTargets": [ 1 ]
                        },
                        {
                            "mRender": function ( data, type, row ) {
                                return row[objDataTable.entete["type"]];
                            },
                            "aTargets": [ 2 ]
                        }
                    ],
                    "fnDrawCallback": function( oSettings ) {
                        $('#table_missedCards').trigger('create');
                    } 
                });
            } else{
                $.functionsLib.notification("Erreur : "+p_retour["strErreur"], $.functionsLib.oda_msg_color.ERROR);
            }
        } catch (er) {
            $.functionsLib.log(0, "ERROR(retourMissedCards):" + er.message);
        }
    }
    
</script>

</head>
<body onload="OnLoad();">

    <!-- page -->
    <div data-role="page" data-title="Titre">

        <!-- /panel -->
        <div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

        </div>
        <!-- /panel -->
        
        <!-- PopUp -->
        <div data-role="popup" id="popup" class="ui-content">
            <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>
            <div style="padding:10px 20px;">
                <h4><label id="label_popup"></label></h4>
                <div id="div_popup"></div>
            </div>
        </div>
        <!-- /PopUp -->

        <!-- header -->
        <div data-role="header" data-position="fixed">
            <a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
            <h1 id="id_titre">titre</h1>
            <a href="javascript:window.location = ('./api_page_contact.html?mili='+$.functionsLib.getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
        </div>
        <!-- /header -->

        <!-- content -->
        <div data-role="content" id="main_content">
            
            <!-- navbar -->
            <div id="navBarSets"></div>
            <!-- /navbar -->
            
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h3>Metrics Collection</h3>
                <div class="ui-grid-a">
                    <div class="ui-block-a" style="width: 70%;">
                        <div id="div_metrics_collection">Chargement...</div>
                    </div>
                    <div class="ui-block-b" style="width: 30%;">
                        <div id="div_metrics_collection_neutre">Chargement...</div>
                    </div>
                </div>
            </div>
            
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h3>Metrics Paquets</h3>
                <table>
                    <tr>
                        <td>
                            <div id="div_metrics_paquets" style="width: 46%;display:inline;">Anomalie code E03</div>
                        </td>
                        <td style="vertical-align:text-top;">
                            <div id="div_metrics_dropRate" style="width: 46%;display:inline;"></div>
                        </td>
                    </tr>
                </table>
            </div>
            
            <div data-role="collapsible" data-collapsed="false" data-mini="true">
                <h3>Infos Paquets</h3>
                <label>Les drops :</label>
                <table style="width: 100%">
                    <tr>
                        <td>
                            Les classiques :<br>
                            <div id="div_drop_classique">Anomalie code E03</div>
                        </td>
                        <td>
                            Les rares :<br>
                            <div id="div_drop_rare">Anomalie code E03</div>
                        </td>
                        <td>
                            Les &eacute;piques :<br>
                            <div id="div_drop_epique">Anomalie code E03</div>
                        </td>
                        <td>
                            Les l&eacute;gendaires :<br>
                            <div id="div_drop_legendaire">Anomalie code E03</div>
                        </td>
                    </tr>
                </table>
                <br><br>
                <label>Les meilleurs paquets :</label>
                <div id="div_best_paquets">Anomalie code E03</div>
            </div>
            
        </div>
        <!-- /content -->

        <!-- footer -->
        <div data-role="footer" data-position="fixed">
            <a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./api_page_faq.html?mili='+$.functionsLib.getMilise());">FAQ</a>
            <h1 id="id_affichageUser">User</h1>
            <a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" href="javascript:window.location = ('./api_page_sortie.html?mili='+$.functionsLib.getMilise());">Logout</a>
        </div>
        <!-- /footer -->

    </div>
    <!-- /page -->
</body>
</html>